<template>
	
	<div class="edit-model-wrap" :style="{ width: width + 'px' }">
		<button class="resize-button" @click="OnResizeClick">
			<el-icon>
				<ArrowRightBold v-show="isExpand" />
				<ArrowLeftBold v-show="!isExpand" />
			</el-icon>
		</button>
		<div class="edit-right-pane">
			<div class="scene-layer">
				<SceneLayer @onRowClick="onLayerClick" />
			</div>
 			<div class="scene-actor" v-show="isEditActor">
				<SceneActor ref="sceneActorRef" />
			</div> 
		</div>
	</div>
</template>

<script setup lang="ts">
	
	import SceneLayer from "./sceneLayer/SceneLayer.vue"
	import SceneActor from "./sceneActor/SceneActor.vue"
	
	import {
	  ArrowRightBold,ArrowLeftBold,Notebook
	} from '@element-plus/icons-vue'
	
	import { ref } from 'vue'
	
	const isEditActor = ref(false)
	
	const paneWidth=350;
	const isExpand = ref(true)
	const width = ref(paneWidth)
	const sceneActorRef=ref();
	
	const OnResizeClick=()=>{
		if(width.value==paneWidth){
			isExpand.value=false
			width.value=0;
		}else{
			width.value=paneWidth;
			isExpand.value=true
		}
	}
	
	const onLayerClick=(row, column, event)=>{
		
		if(row.type!='Layer'){
			isEditActor.value=true;
			sceneActorRef!.value.setActor(row);
			return;
		}
		isEditActor.value=false;
	}
	
	const dragEagle= (e)=> {
		var targetDiv = document.getElementById('obj-setting'); 
		var targetDivHeight = targetDiv.offsetHeight;
		var startX = e.clientX;
		var startY = e.clientY;
		document.onmousemove  = function (e) {
			e.preventDefault();
			var distY = Math.abs(e.clientY - startY);
			//往上方拖动：
			if (e.clientY < startY) {
				targetDiv.style.height = targetDivHeight + distY + 'px';
			}
			//往下方拖动：
			if (e.clientX < startX && e.clientY > startY) {
				targetDiv.style.height = (targetDivHeight - distY) + 'px';
			}
			
			if (parseInt(targetDiv.style.height) >= 600) {
				targetDiv.style.height = 600 + 'px';
			}
			
			if (parseInt(targetDiv.style.height) <= 350) {
				targetDiv.style.height = 350 + 'px';
			}
		}
		// 鼠标松开事件
		document.onmouseup = function (evt) {
			document.onmousemove = null;
			document.onmouseup = null;
		};
	}
	

</script>

<style  scoped>
	
	.edit-model-wrap{
		width: 400px;
		background: red;
		float: right;
		z-index: 0.625rem;
		height: 100%;
		border-left: 1px solid rgb(24, 24, 27);
		background: #2b2c2f;
		

		.resize-button {
		    cursor: pointer;
		    padding: 1px;
		    border: 1px solid rgb(0, 128, 255);
		    color: rgb(212, 212, 212);
		    border-radius: inherit;
		    font-size: 12px;
		    box-sizing: border-box;
		    background: linear-gradient(270deg, rgba(21, 98, 240, 0.45), rgba(14, 31, 58, 0.45));
		    height: 41px;
		    width: 17px;
			position: relative;
			left: 11px;
			top: 40%;
		    transform: translate(-170%, 50%);
		}
		.edit-right-pane{
			display: -webkit-flex;
			display: flex;
			-webkit-flex-direction: column;
			flex-direction: column;
			height: 100%;
			margin-top: -41px;
			
			>.scene-layer{
				flex: 0.5;
			}
			
			>.scene-actor{
				flex: 0.5;
				background-color: red;
			}
			
		}
		
	}
</style>